import React, {Component} from 'react';
import {Text, View} from 'react-native';

/**
 * DES: 测试State组件
 */
class BlinkComponent extends Component {
    // DES: 声明state变量
    state = {isShowingText: true};

    // DES: 倒计时
    componentDidMount() {
        // DES: 1000毫秒执行一次Handler操作
        setInterval(() => {
            // DES: 每次更新就设置State的状态
            this.setState({
                isShowingText: !this.state.isShowingText,
            });
        }, 1000);
    }

    render() {
        // DES: 判断是否显示Text
        if (!this.state.isShowingText) {
            return null;
        }

        // DES: 读取的也是text属性
        return (
            <Text>{this.props.text}</Text>
        );
    }
}

export default class BlinkApp extends Component {
    render() {
        return (
            // DES: 设置了text属性
            <View>
                <BlinkComponent text="I love to Blink"/>
                <BlinkComponent text="Yes blinking is so great"/>
                <BlinkComponent text="Why did they ever take this out of HTML"/>
                <BlinkComponent text="Look at me look at me look at me"/>
            </View>
        );
    }
}
